@import '../../style/themes/index';
@import './token.less';

@steps-prefix-cls: ~'@{kd-prefix}-steps';

.@{steps-prefix-cls} {
  display: flex;
  justify-content: space-between;

  .@{steps-prefix-cls}-icon {
    border: 2px solid;
    padding-top: 1px;
  }

  .@{kd-prefix}icon-exclamatory {
    font-size: 30px;
  }

  &-item {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    width: 0;

    &-clickable {
      cursor: pointer;

      .@{steps-prefix-cls}-item-iconContainer-icon {
        .@{steps-prefix-cls}-icon {
          background-color: @steps-color-white;
        }
      }

    }

    &-clickable&-wait {
      .@{steps-prefix-cls}-icon,
      .@{steps-prefix-cls}-item-title {
        transition: all @steps-duration-promptly;
      }

      &:hover {
        .@{steps-prefix-cls}-icon {
          background-color: @steps-color-white;
          color: @steps-color-hover;
          border-color: @steps-color-hover;
        }

        .@{steps-prefix-cls}-item-title,
        .@{steps-prefix-cls}-item-description {
          color: @steps-color-hover;
        }
      }
    }

    &-clickable&-finish {
      .@{steps-prefix-cls}-item-title {
        transition: all @steps-duration-promptly ease;
      }

      &:hover {
        .@{steps-prefix-cls}-item-title {
          color: @steps-color-completed
        }
      }
    }

    &-container {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    &-iconContainer {
      display: flex;
      justify-content: center;
      position: relative;

      &::after {
        content: '';
        width: 100%;
        height: @steps-line-sizing-height;
        border-bottom: 1px dashed @steps-color-wait;
        border-left: 1px dashed @steps-color-wait;
        position: absolute;
        left: 50%;
        top: calc(50% - @steps-line-sizing-height / 2);
        transition: width @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color @steps-duration-promptly cubic-bezier(0.48, 0.04, 0.52, 0.96)
      }

      &:last-child {
        &::after {
          display: none;
        }
      }

      &-icon {
        z-index: 1;
        width: @steps-icon-sizing-width;
        height: @steps-icon-sizing-width;
        display: flex;
        justify-content: center;
        align-items: center;

        .@{steps-prefix-cls}-icon {
          width: @steps-icon-sizing-width;
          height: @steps-icon-sizing-width;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: @steps-color-white;
          color: @steps-color-wait;
          font-size: calc(@steps-icon-sizing-width - 13px);
          border-radius: 50%;
          border-color: @steps-color-wait;
          box-sizing: border-box;
        }
      }
    }

    &-content {
      text-align: center;

      .@{steps-prefix-cls}-item-title {
        line-height: 20px;
        font-size: @steps-font-size;
        color: @steps-color-wait;
      }

      .@{steps-prefix-cls}-item-description {
        line-height: 20px;
        font-size: @steps-font-size;
        color: @steps-color-wait;
        width: @steps-vertical-description-sizing-width;
      }
    }

    &-process {
      color: @steps-color-hover;

      .@{steps-prefix-cls}-icon {
        background-color: @steps-color-white;
        color: @steps-color-hover;
        border-color: @steps-color-hover;
      }

      .@{steps-prefix-cls}-item-title, .@{steps-prefix-cls}-item-description {
        color: @steps-color-hover;
      }
    }

    &:last-child {
      .@{steps-prefix-cls}-item-iconContainer {
        &::after {
          display: none;
        }
      }
    }

    &-finish {
      .@{steps-prefix-cls}-icon {
        background-color: @steps-color-white;
        color: @steps-color-completed;
        border-color: @steps-color-completed;
        box-sizing: border-box;
      }

      .@{steps-prefix-cls}-item-content {
        .@{steps-prefix-cls}-item-title,
        .@{steps-prefix-cls}-item-description {
          color: @steps-color-completed;
        }
      }
    }


    &-error {
      .@{steps-prefix-cls}-icon {
        color: @steps-color-error;
        border-color: @steps-color-error;
      }

      .@{steps-prefix-cls}-item-content {
        .@{steps-prefix-cls}-item-title,
        .@{steps-prefix-cls}-item-description {
          color: @steps-color-error;
        }
      }
    }
  }

  &-bottomLable {
    .@{steps-prefix-cls}-item-iconContainer {
      margin-bottom: 4px;
    }
  }

  &-horizontal {
    .@{steps-prefix-cls}-item {
      min-width: 88px;
      box-sizing: content-box;
      padding: 0 22px;

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        padding-right: 0;
      }

      .@{steps-prefix-cls}-item-description {
        height: @steps-horizontal-description-sizing-height;
        width: auto;
      }

      &-iconContainer::after {
        width: ~'calc(100% + 44px)';
      }
    }
  }

  &-vertical {
    flex-direction: column;

    .@{steps-prefix-cls}-item {
      width: 100%;
      min-height: 68px;
      box-sizing: content-box;
      padding: 22px 0;

      &:first-child {
        padding-top: 0;
      }

      &:last-child {
        padding-bottom: 0;
      }

      &-container {
        flex-direction: row;
        justify-content: flex-start;
      }

      &-iconContainer {
        margin-bottom: 0;
        margin-right: 4px;

        &::after {
          width: @steps-line-sizing-height;
          height: calc(100% + 44px);
          top: 2px;
          left: calc(50% - @steps-line-sizing-height / 2);
        }
      }

      &-content {
        text-align: left;
        margin-top: 1px;
      }
    }
  }
}
